<template>
  <div class="app-container">
    <div style="display: flex;height: 100%">
      <div class="div-big mr5" style="flex: 1;height: 100%;">
        <div class="mb10" style="border-bottom: 1px #D0D0D066 dotted;padding-bottom: 5px">
          <span style="font-size: 14px">患者列表</span>
          <div>
            <el-radio-group v-model="queryParams.inFlag" class="mb5 hospital-status"
                            style="margin-left: 0;"
                            @change="inFlagChange">
              <el-radio :border="true" value="">全部</el-radio>
              <el-radio v-for="dict in dictDataMap['entry_and_exit_hospital_status']" :key="dict.dictValue"
                        :border="true"
                        :value="dict.dictValue"
                        class="clinic-type-radio">{{ dict.dictLabel }}
              </el-radio>
            </el-radio-group>
          </div>
          <el-row :gutter="10">
            <el-col :span="12">
              <dept-vs-bed-list v-model="queryParams.wardAdmissionToName" :clinical-sign-str="'3'"
                                :dept-id="queryParams.wardAdmissionTo"
                                :org-id="userInfo.orgId"
                                :placeholder="'请选择入院病区'" style="width: 100%"
                                @deptChange="wordChange"/>
            </el-col>
            <el-col :span="12">
              <el-input v-model="queryParams.itemInfo" class="mb5 left-patient"
                        clearable
                        placeholder="姓名、住院号" @input="inFlagChange">
                <template #append>
                  <el-tooltip content="刷新列表" effect="dark" placement="top">
                    <el-button style="float: right" type="primary" @click="patientRefresh">
                      <template #icon>
                        <i-ep-search/>
                      </template>
                    </el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </el-col>
          </el-row>
        </div>
        <div class="infinite-list-wrapper" style="overflow-y: auto">
          <div
            v-infinite-scroll="load"
            :infinite-scroll-disabled="disabled"
          >
            <div v-for="(patient, index) in patPatientList"
                 :id="'patientCard-' + index"
                 :key="patient.id" class="list-item box-card left-small-card"
                 @click.stop="patientClick(patient, index)">
              <el-row class="ml5 mr5">
                <el-col :span="11"><span class="fz15" style="color: #7171ff">{{
                    patient.name
                  }}</span></el-col>
                <el-col :span="12"><span class="fz13">{{ patient.age }} 岁{{ patient.ageMonth }} 月{{
                    patient.ageDay
                  }}天{{
                    patient.ageHours
                  }}小时</span></el-col>
                <el-col :span="1">
                  <svg-icon :icon-class="dictStore.getMateDictInfo(dictDataMap['sys_user_sex'], patient.sex)
                    .dictValue === '1'
                    ? 'man'
                    : 'woman'
                    "/>
                </el-col>
                <el-col :span="16">
                  <span class="fz13">ID: {{ patient.patientId }}</span>
                </el-col>
                <el-col :span="8">
                  <span class="fz13">住院次数: {{
                      !patient.hospitalizationNumber ? "--" : patient.hospitalizationNumber
                    }}</span>
                </el-col>
                <el-col :span="16">
                  <span class="fz13">住院号: <span class="span-patient">{{
                      patient.hospitalNo
                    }}</span></span>
                </el-col>
                <el-col :span="8">
                  <span class="fz13">床号: {{ !patient.bedNo ? "--" : patient.bedNo }}</span>
                </el-col>
                <el-col :span="12">
                  <span class="fz13">科室: {{
                      !patient.deptAdmissionToName ? "--" : patient.deptAdmissionToName
                    }}</span>
                </el-col>
                <el-col :span="12">
                  <span class="fz13">病区: {{
                      !patient.wardAdmissionToName ? "--" : patient.wardAdmissionToName
                    }}</span>
                </el-col>
                <el-col :span="24">
                    <span class="fz13">入院时间: {{
                        !patient.admissionTime ? "--" : patient.admissionTime
                      }}</span>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <p v-if="loading && patPatientList.length < count && patPatientList.length != 0" class="div-p">加载中...</p>
        <p v-if="noMore || patPatientList.length === count" class="div-p"> 没有更多数据了</p>
      </div>
      <div class="div-big" style="flex: 4;height: 100%;">
        <pat-prepayment-item v-if="form.visitId" :patient-info="patientInfo" :visit-id="form.visitId"/>
        <el-empty v-else :image-size="300" description="请先选择左侧患者后，再操作"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "PatPrepayment"
}
</script>

<script setup lang="ts">
import patPrepaymentItem from "./item.vue";
import {
  selectPagePatVisit
} from "@/api/hospitalization/patVisit";
import {useDictStoreHook} from "@/store/modules/dict";

import {useUserStoreHook} from "@/store/modules/user";

const useUserStore = useUserStoreHook();
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo;
const dictStore = useDictStoreHook();
let dictDataMap = ref(dictStore.isTypeGetData('pay_way_dict', 'entry_and_exit_hospital_status', 'sys_user_sex'))
const {proxy} = getCurrentInstance() as any;

const formRef = ref();
const patPatientList = ref<any>([]);
const open = ref(false);
const title = ref("");
const patientInfo = ref<any>({})
const count = ref(1)
const loading = ref(false)
const noMore = computed(() => count.value === patPatientList.value.length)
const disabled = computed(() => loading.value || noMore.value)

const form = ref<any>({
  patientId: "",
  visitId: "",
  feesNo: "",
  acctNo: "",
  payWay: "",
  cardNo: "",
  type: "",
  refundedId: "",
  orgId: userInfo.orgId,
  remarks: "",
  refundedUser: "",
  inFlag: ""
})
const queryParams = ref<any>({
  pageNum: 1 as number,
  pageSize: 2,
  patientId: "",
  visitId: "",
  feesNo: "",
  acctNo: "",
  payWay: "",
  cardNo: "",
  type: "",
  refundedId: "",
  orgId: userInfo.orgId,
  remarks: "",
  refundedUser: "",
  inFlag: "",
  wardAdmissionTo: ""
})

// watch(
//   () => queryParams.value.wardAdmissionTo,
//   (newValue, _oldValue) => {
//     queryParams.value.deptId = newValue;
//     patientRefresh();
//   },
//   {deep: true, immediate: true}
// );


const load = () => {
  loading.value = true
  selectPagePatVisit(queryParams.value).then((res: any) => {
    if (res.rows.length > 0) {
      count.value = res.total
      patPatientList.value = patPatientList.value.concat(res.rows)
      queryParams.value.pageNum += 1
      loading.value = false
    }
  });
}

function patientRefresh() {
  patPatientList.value = []
  patientInfo.value = {}
  form.value.visitId = "";
  queryParams.value.pageNum = 1
  load()
}

/** 左侧患者列表选中事件 */
function patientClick(item, index) {
  proxy.$patientClickCssChange(index, patPatientList.value);
  form.value.visitId = item.visitId
  form.value.patientId = item.patientId
  patientInfo.value = item

}

function wordChange(obj) {
  queryParams.value.wardAdmissionTo = obj.wardCode
  queryParams.value.deptAdmissionToName = obj.wardCodeName
  patientRefresh()
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    prepaymentId: "",
    patientId: "",
    visitId: "",
    feesNo: "",
    acctNo: "",
    payWay: "",
    cardNo: "",
    type: "",
    refundedId: "",
    orgId: "",
    delFlag: "",
    createBy: "",
    createTime: "",
    updateBy: "",
    updateTime: "",
    remarks: "",
    paymentAdvice: 0,
    refundedUser: ""
  };
  nextTick(() => {
    formRef.value.resetFields()
  })
}

function inFlagChange() {
  patientRefresh();
}

</script>


<style lang="scss" scoped>

.infinite-list-wrapper {
  height: calc(100% - 120px);
}

.infinite-list-wrapper .list {
  padding: 0;
  margin: 0;
}

.infinite-list-wrapper .list-item {
  height: 100px;
  background-color: rgba(255, 255, 255, 0.4);
  border: 1px solid #027687;
  border-radius: 5px;
}

.div-p {
  color: #4ba2f0;
  font-size: 15px;
  justify-content: center;
  display: flex;
  margin: 8px 0 8px 0
}

.div-big {
  border: 1px solid #027687;
  min-width: 240px;
  border-radius: 5px;
  padding: 5px;
}

.clinic-type-radio {
  margin-right: 14px;
  margin-left: -9px;
}

:deep(.left-patient > .el-input-group__append) {
  background-color: var(--el-color-primary) !important;
  color: #ffffff;
}

.hospital-status .el-radio {
  padding: 0 5px 5px 5px;
  margin: 0 2px 0 0;
}


.span-patient {
  font-weight: bold;
  color: #0058ff;
}
</style>
